<script setup>
  import { delBannerRcomApi, getBannerRcomApi } from '@/api/article'
  import useTable from '@/hooks/useTable'
  import PickRecomDrawer from './components/PickRecomDrawer.vue'
  import { ref } from 'vue'

  const { tableData, pager, loading, handleDel, getData } = useTable({ apiFn: getBannerRcomApi, delApiFn: delBannerRcomApi, resCallback })

  // 通过function定义【支持预加载】
  function resCallback(res) {
    console.log(res)
    tableData.value = res.data
    pager.total = 0
    loading.value = false
  }

  const pickRecomRef = ref(null)
</script>

<template>
  <div class="recom-view content">
    <LvList :listData="tableData">
      <template #btns>
        <el-button type="success" :disabled="tableData.length >= 4" @click="pickRecomRef?.open">选择推荐游记</el-button>
      </template>
      <template #left="{ row }">
        <div class="cover"><img :src="row.imageUrl" /></div>
        <div class="content">
          <p>作者：{{ row.nickname }}</p>
          <p>发布时间：{{ row.articltTime }}</p>
          <p>更新时间：{{ row.time }}</p>
        </div>
      </template>
      <template #right="{ row }">
        <el-button type="primary" @click="pickRecomRef?.open(row)">修改</el-button>
        <el-button type="danger" @click="handleDel(row._id)">删除</el-button>
      </template>
    </LvList>

    <PickRecomDrawer ref="pickRecomRef" @update="getData" />
  </div>
</template>

<style scoped lang="scss">
  .cover {
    width: 90px;
    height: 120px;
    img {
      border-radius: 6px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .content {
    padding-left: 10px;
    .title {
      font-weight: 700;
      color: #333 !important;
    }
    p {
      color: #0000008c;
      margin: 5px 0;
    }
  }
</style>
